<template>
  <div class="visualizer-view">
    <template v-if="editorStore.hasContent">
      <JDFform />
    </template>

    <template v-else>
      <div class="empty-state">
        <el-empty description="请从文件管理页面加载 JDF/XML 文件进行可视化">
          <el-button type="primary" @click="goToFileManager">前往文件管理</el-button>
        </el-empty>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useEditorStore } from '@/stores/editorStore.ts'
import JDFform from '@/components/flow/JDFform.vue';
import { useRouter } from 'vue-router'; // Import useRouter

const editorStore = useEditorStore()
const router = useRouter(); // Initialize router

const goToFileManager = () => {
  router.push('/files');
};
</script>

<style lang="scss" scoped>
.visualizer-view {
  height: 100%;
  overflow: auto;

  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>